<template>
  <view>
    <!-- 搜索 -->
    <uni-search-bar></uni-search-bar>
    <!-- 轮播图 -->
    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="(v, i) in banners" :key="i">
        <image class="banner" :src="v" mode=""></image>
      </swiper-item>
    </swiper>
    <!-- 上下轮播动画 -->
    <swiper class="swiper1" :autoplay="true" :interval="3000" :duration="1000" vertical circular>
      <swiper-item>
        <view class="swiper-item">真好呀</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">呵呵呵呵</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">嘻嘻嘻嘻嘻</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">天气还早呢不错呀</view>
      </swiper-item>
    </swiper>
    <!-- 导航菜单 -->
    <view class="menus">
      <view class="menu-item" v-for="(v, i) in menus" :key="i">
        <image :src="v.image" mode=""></image>
        <text>{{v.name}}</text>
      </view>
    </view>
    <!-- 筛选 -->
    <view class="filter">
      <uni-data-select @change="change" placeholder="类型" :clear="false" class="select" v-model="type" :localdata="types">
      </uni-data-select>
      <uni-data-select @change="change" placeholder="区域" :clear="false" class="select" v-model="distance" :localdata="distances">
      </uni-data-select>
      <uni-data-select @change="change" placeholder="价格" :clear="false" class="select" v-model="price" :localdata="prices">
      </uni-data-select>
    </view>
    <!-- 商品列表 -->
    <list-item v-for="(v, i) in list" :key="i" :v="v" @click="toDetail(v)"></list-item>
  </view>
</template>

<script>
  export default {
    onLoad() {
      this.getBnaners()
      this.getList()
      this.getMenus()
    },
    onReachBottom() {
        this.page++;
        this.getList()
    },
    computed: {
      params() {
        // 查询字符对象
        const o = {};
        // 是否类型查询
        if (this.type) {
          o.type = this.type
        }
        // 是否距离查询
        if (this.distance) {
          const [distance_gte, distance_lte] = this.distance.split('-');
          if (distance_gte) o.distance_gte = distance_gte
          if (distance_lte) o.distance_lte = distance_lte
        }
        // 是否价钱查询
        if (this.price) {
          const [price_gte, price_lte] = this.price.split('-');
          if (price_gte) o.price_gte = price_gte
          if (price_lte) o.price_lte = price_lte
        }
        return o
      }
    },
    watch: {
      params() {
        this.getList()
      }
    },
    data() {
      return {
        banners: [],
        menus: [],
        list: [],
        type: '',
        distance: '',
        price: '',
        page: 1,
        // ["一室一厅", "两室一厅", "两室两厅", "三室两厅", "四室两厅"]
        types: [{
            value: "一室一厅",
            text: "一室一厅"
          },
          {
            value: "两室一厅",
            text: "两室一厅"
          },
          {
            value: "两室两厅",
            text: "两室两厅"
          },
          {
            value: "三室两厅",
            text: "三室两厅"
          },
          {
            value: "四室两厅",
            text: "四室两厅"
          },
        ],
        distances: [{
            value: "-1000",
            text: "1000M以内"
          },
          {
            value: "1000-3000",
            text: "1公里-3公里"
          },
          {
            value: "3000-7000",
            text: "3公里-7公里"
          },
          {
            value: "7000-10000",
            text: "7公里-10公里"
          },
          {
            value: "10000-",
            text: "10公里+"
          },
        ],
        prices: [{
            value: "-1000",
            text: "1000元以内"
          },
          {
            value: "1000-2000",
            text: "1000元-2000元"
          },
          {
            value: "2000-4000",
            text: "2000元-4000元"
          },
          {
            value: "4000-6000",
            text: "4000元-6000元"
          },
          {
            value: "6000-8000",
            text: "6000元-8000元"
          },
          {
            value: "8000-10000",
            text: "8000元-10000元"
          },
        ],
      };
    },
    methods: {
      change() {
        this.page = 1;
        this.list = []
      },
      toDetail(v) {
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + v.id
        })
      },
      async getBnaners() {
        const {
          data: banners
        } = await uni.request({
          url: 'http://localhost:3000/banners'
        });
        this.banners = banners
      },
      async getMenus() {
        const {
          data: menus
        } = await uni.request({
          url: 'http://localhost:3000/menus'
        });
        this.menus = menus
      },
      async getList() {
        const {
          data: list
        } = await uni.request({
          url: 'http://localhost:3000/list',
          data: {
            ...this.params,
            _page: this.page
          }
        });
        this.list = this.list.concat(list)
      }
    }
  }
</script>

<style lang="scss">
  .swiper1 {
    height: 30px;
  }

  .filter {
    position: sticky;
    /*#ifdef H5*/
    top: 44px;
    /*#endif*/
    /*#ifdef MP*/
    top: 0;
    /*#endif*/
    background-color: white;
    z-index: 999;
    display: flex;

    .select {
      flex: 1;
    }
  }

  .swiper {
    width: 100%;
    height: 400rpx;

    .banner {

      width: 100%;
      height: 400rpx;
    }
  }

  .menus {
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      height: 100px;

      image {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }
</style>
